<template>
  <el-dialog
    top="5vh"
    width="55%"
    title="详情"
    append-to-body
    destroy-on-close
    fullscreen
    v-if="visible"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="handleEditReset"
  >
    <div class="dialog-content">
      <avue-form ref="editForm" v-model="form" :option="option">
        <template slot="planCode">
          <el-input placeholder="请输入编码" v-model="form.planCode" disabled> </el-input>
        </template>
        <template slot-scope="{}" slot="automatic">
          <label>备注：自动报检的触发时机在【参数管理】中进行配置</label>
        </template>
        <template slot-scope="{}" slot="ruleControl">
          <h3>1. 防漏检验控制</h3>
          <div class="ml20">
            <el-radio disabled v-model="form.missingInspectControl" :label="1">
              <el-tooltip content="在预警中心设置若待检单的未处理时长达到设定值时，则会预警消息通知" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              允许出库，仅预警提示告知
            </el-radio>

            <span>备注：具体到预警中心设计</span>
          </div>
          <div class="mt20 ml20 rules-container">
            <el-radio disabled v-model="form.missingInspectControl" :label="2" size="medium">
              <el-tooltip
                content="待检单达到设定的漏检时长控制时，若是工单首件，该工单每个生产工序都无法过站并提示； 若是工段首件，则该工段内的每个工序无法过站并提示！"
                placement="top"
              >
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              不允许出库
            </el-radio>
            <!--            <div class="ml20 num-input-contain" v-if="form.missingInspectControl === 2">-->
            <!--              <label>漏检时长控制(min) : </label>-->
            <!--              <el-input-number disabled placeholder="请输入漏检时长" v-model="form.missingInspectDuration" :min="0" controls-position="right" :precision="0" class="input-width">-->
            <!--              </el-input-number>-->
            <!--            </div>-->
          </div>
        </template>
        <template slot-scope="{}" slot="nGControl">
          <h3>2. 检验结果为NG控制</h3>
          <div class="ml20">
            <el-radio disabled v-model="form.resultNgControl" :label="1">
              <el-tooltip content="在预警中心设置若待检单的未处理时长达到设定值时，则会预警消息通知" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              允许出库，仅预警提示告知
            </el-radio>
            <span>备注：具体到预警中心设计</span>
          </div>
          <div class="mt20 ml20 rules-container">
            <el-radio v-model="form.resultNgControl" :label="2" size="medium">
              <el-tooltip
                content="待检单达到设定的漏检时长控制时，若是工单首件，该工单每个生产工序都无法过站并提示； 若是工段首件，则该工段内的每个工序无法过站并提示！"
                placement="top"
              >
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              不允许出库
            </el-radio>
          </div>
        </template>
        <template slot-scope="{}" slot="nGControl1">
          <h3>3. 检验结果为NG，但不良处理不为让步通过时（即为二次检/返工）控制<span style="color: #f56c6c; margin-right: 4px">*</span></h3>
          <div class="ml20">
            <el-radio v-model="form.resultNgHandingControl" :label="1" disabled>
              <el-tooltip content="在预警中心设置若待检单的未处理时长达到设定值时，则会预警消息通知" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              允许出库，仅预警提示告知
            </el-radio>
            <span>备注：具体到预警中心设计</span>
          </div>
          <div class="mt20 ml20 rules-container">
            <el-radio v-model="form.resultNgHandingControl" :label="2" size="medium" disabled>
              <el-tooltip content="待检单结果为NG，不良处理的结果不为让步通过时，则该检验单的不良处理不为让步通过时，则不能出库；若为让步通过，则允许出库" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              不允许出库
            </el-radio>
          </div>
        </template>
        <template slot-scope="{}" slot="nGControl2">
          <h3>4. 不良包装入库控制</h3>
          <div class="ml20">
            <el-radio v-model="form.inboundControl" :label="1" disabled>
              <el-tooltip content="在预警中心设置若待检单的未处理时长达到设定值时，则会预警消息通知" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              允许出库，仅预警提示告知
            </el-radio>
            <span>备注：具体到预警中心设计</span>
          </div>
          <div class="mt20 ml20 rules-container">
            <el-radio v-model="form.inboundControl" :label="2" size="medium" disabled>
              <el-tooltip content="检验时不良登记某个包装后，则该包装无法进行出库！但不良处理后，则可进行入库" placement="top">
                <i class="el-tooltip el-icon-info"></i>
              </el-tooltip>
              不允许出库
            </el-radio>
          </div>
        </template>
        <template slot-scope="{}" slot="colseControl">
          <h3>3. 检验时长控制</h3>
        </template>
        <template slot-scope="{}" slot="avueCurd">
          <div class="avue-crud">
            <avue-crud ref="editCrud" :option="tableOption" :data="form.qmsInspectionPlanObjectVOList"> </avue-crud>
          </div>
        </template>
      </avue-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-delete" @click="handleEditReset">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { guid } from '@/util/helpers';
import { getPlanConfigDetail } from '@/api/quality/palnConfig';

export default {
  name: 'viewShipmentPlanConfig',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: {
        searchShow: true,
        searchMenuSpan: 6,
        menuPosition: 'right',
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 150,
        group: [
          {
            label: '基础信息',
            prop: 'equipmentInfo',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                label: '计划名称',
                prop: 'planName',
                disabled: true,
                span: 8,
                rules: [{ required: true, message: '请输入计划名称', trigger: 'blur' }]
              },
              {
                label: '计划编码',
                prop: 'planNo',
                disabled: true,
                formslot: true,
                span: 8
              },

              {
                label: '检验类型',
                prop: 'planType',
                value: '出货检验',
                disabled: true,
                span: 8
              }
              // {
              //   label: '检验类型',
              //   prop: 'planType',
              //   value: '出货前',
              //   disabled: true,
              //   span: 8,
              //   rules: [{ required: true, message: '请输入检验类型', trigger: 'blur' }]
              // }
            ]
          },
          {
            label: '报检方式',
            prop: 'equipmentInfo1',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            disabled: true,
            column: [
              {
                label: '报检方式',
                prop: 'sendExamineType',
                multiple: true,
                dicData: [
                  { label: '自动', value: 'AUTO' },
                  { label: '手动', value: 'MANUAL' }
                ],
                span: 8,
                labelTip: '选择手动或自动后，则表示生成的待检单会受防呆规则内容的受控',
                type: 'select',
                rules: [{ required: true, message: '请选择报检方式', trigger: 'change' }]
              },
              {
                prop: 'automatic',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              }
              // {
              //   label: '计划类型',
              //   prop: 'planName',
              //   span: 8,
              //   labelTip: '具体到预警中心设计',
              //   type: 'select',
              //   // 必填校验
              //   dicData: [
              //     { label: '工单首件', value: 'wo' },
              //     { label: '工段首件', value: 'wo2' }
              //   ],
              //   rules: [{ required: true, message: '请选择计划类型', trigger: 'change' }]
              // }
            ]
          },
          {
            label: '异常处理流程设置',
            prop: 'equipmentInfo3',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                label: '检验结果为NG，需进行不良处理',
                prop: 'radio',
                type: 'radio',
                labelWidth: 220,
                span: 24,
                disabled: true,
                value: 1,
                dicData: [
                  {
                    label: '是',
                    value: 1
                  },
                  {
                    label: '否',
                    value: 2
                  }
                ]
              }
            ]
          },

          {
            label: '防呆规则',
            prop: 'equipmentInfo2',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                prop: 'ruleControl',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              },
              {
                prop: 'nGControl',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              },
              {
                prop: 'nGControl1',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              },
              {
                prop: 'nGControl2',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              }
            ]
          },
          {
            label: '适用对象',
            prop: 'equipmentInfo4',
            collapse: true,
            icon: 'el-icon-vertical-bar',
            labelWidth: 100,
            column: [
              {
                prop: 'avueCurd',
                labelWidth: 0,
                span: 24,
                order: 6,
                formslot: true
              }
            ]
          }
        ]
      },
      form: {},
      tableOption: {
        height: '400px',
        calcHeight: 30,
        tip: false,
        searchShow: false,
        filterBtn: false,
        refreshBtn: false,
        columnBtn: false,
        border: true,
        index: true,
        indexLabel: '序号',
        searchMenuSpan: 6,
        searchLabelWidth: 90,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        labelWidth: 130,
        menu: false,
        selection: true,
        highlightCurrentRow: true, // 选中高亮
        dialogClickModal: false,
        searchMenuPosition: 'right',
        searchSpan: 6,
        column: [
          {
            label: '客户名称',
            prop: 'partnerName'
          },
          {
            label: '物料编码',
            prop: 'partNo'
          },
          {
            label: '物料名称',
            prop: 'partName'
          }
        ]
      }
    };
  },
  methods: {
    async getDetail(id) {
      try {
        const res = await getPlanConfigDetail({ id: id });
        const data = res.data.data;
        const options = JSON.parse(data.options);
        delete data.options;
        const sendExamineType = data.sendExamineType ? data.sendExamineType.split(',') : [];
        this.form = {
          ...data,
          ...options,
          sendExamineType
        };
      } catch (e) {
        console.warn(e);
      }
    },
    handleEditReset() {
      this.$refs.editForm.resetForm();
      this.$emit('update:visible', false);
      this.$emit('closeDialog');
    },
    handleEditSubmit() {
      console.log(this.form);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-content {
  height: calc(100vh - 180px);
  overflow-y: scroll;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s;
    z-index: 1;
    cursor: not-allowed;
  }
  h3 {
    margin: 0;
    font-size: 15px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .ml20 {
    margin-left: 20px;
  }
  .rules-container {
    display: flex;
    align-items: center;
    height: 32px;
  }
  .num-input-contain {
    color: #606266;
  }
  .input-width {
    width: 300px;
  }
}
.avue-crud {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 1s;
    z-index: 1;
    cursor: not-allowed;
  }
}
</style>
